<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/chargingStation/Port' }">端口管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约充电押金设置</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 返回 添加 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-back" @click="toPort()">返回</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="opendeposit()">添加</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" :data="ListData" highlight-current-row v-loading="loading" element-loading-text="拼命加载中"
            style="width: 100%;">
            <el-table-column align="center" sortable prop="begin" label="开始时间" width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.begin < 10">{{ '0' + scope.row.begin + ':00' }}</div>
                    <div v-else>{{ scope.row.begin + ':00' }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="end" label="结束时间" width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.end < 10">{{ '0' + scope.row.end + ':00' }}</div>
                    <div v-else>{{ scope.row.end + ':00' }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="deposit" label="押金" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.deposit / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="160">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="400">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="opendeposit(scope.row)">修改</el-button>
                    <el-button size="mini" type="primary" @click="deledeposit(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑界面 -->
        <el-dialog :title="tit" :visible.sync="editFormVisiible" width="30%">
            <el-form label-width="90px">
                <el-form-item label="开始时间">
                    <el-time-select size="small" :picker-options="{ start: '00:00', step: '01:00', end: '24:00' }"
                        v-model="begin" placeholder="选择开始时间"></el-time-select>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-time-select size="small" :picker-options="{ start: '00:00', step: '01:00', end: '24:00' }"
                        v-model="end" placeholder="选择结束时间"></el-time-select>
                </el-form-item>
                <el-form-item label="押金">
                    <el-input size="small" v-model="deposit" auto-complete="off" placeholder="请输入押金"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="adddeposit()"
                    v-if="tit == '添加'">添加</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="updeposit()"
                    v-if="tit == '修改'">修改</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    getOrderBookingDeposit,
    addOrderBookingDeposit,
    delete0rderBookingDeposit,
    upOrderBookingDeposit
} from '../../api/userMG'
export default {
    data() {
        return {
            editFormVisiible: false,
            portId: this.$route.query.id,
            loading: false,
            tit: '添加',
            ListData: [],
            begin: '',
            end: '',
            deposit: '',
        }
    },
    created() {
        this.getdeposit(1)
    },
    methods: {
        // 返回上一页
        toPort() {
            this.$router.go(-1)
        },
        // 删除
        deledeposit(row) {
            this.$confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(() => {
                let data = {
                    id: row.id
                }
                delete0rderBookingDeposit(data).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.getdeposit(1)
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 修改
        updeposit() {
            this.loading = true
            if (this.begin.constructor !== Number) {
                const parts = this.begin.split(':');
                this.begin = parseInt(parts[0])
            }
            if (this.end.constructor !== Number) {
                const partss = this.end.split(':');
                this.end = parseInt(partss[0])
            }
            this.deposit = (this.deposit * 100).toFixed(0)
            upOrderBookingDeposit({
                id: this.id,
                begin: this.begin,
                end: this.end,
                deposit: this.deposit,
                portId: this.portId
            }).then((res) => {
                if (res.code == 200) {
                    this.loading = false
                    this.$message.success(res.msg)
                    this.editFormVisiible = false
                    this.getdeposit(1)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg)
                }
            })
        },
        // 添加
        adddeposit() {
            this.loading = true
            if (this.begin.constructor !== Number) {
                const parts = this.begin.split(':');
                this.begin = parseInt(parts[0])
            }
            if (this.end.constructor !== Number) {
                const partss = this.end.split(':');
                this.end = parseInt(partss[0])
            }
            this.deposit = (this.deposit * 100).toFixed(0)
            addOrderBookingDeposit({
                begin: this.begin,
                end: this.end,
                deposit: this.deposit,
                portId: this.portId,
            }).then((res) => {
                if (res.code == 200) {
                    this.loading = false
                    this.$message.success(res.msg)
                    this.editFormVisiible = false
                    this.getdeposit(1)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg)
                }
            })
        },
        // 关闭编辑对话框
        closeDialog() {
            this.editFormVisiible = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        //打开编辑页面
        opendeposit(row) {
            this.editFormVisiible = true;
            if (row != undefined && row != "undefined") {
                this.tit = "修改"
                this.id = row.id
                if (row.begin < 10) {
                    this.begin = '0' + row.begin + ':00'
                } else {
                    this.begin = row.begin + ':00'
                }
                if (row.end < 10) {
                    this.end = '0' + row.end + ':00'
                } else {
                    this.end = row.end + ':00'
                }
                this.deposit = row.deposit / 100
                this.portId = this.portId
            } else {
                this.tit = "添加"
                this.begin = ""
                this.end = ""
                this.deposit = ""
                this.portId = this.portId
            }
        },
        // 获取列表数据
        getdeposit() {
            this.loading = true;
            getOrderBookingDeposit({
                portId: this.portId
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.ListData = res.data.list;
                    return;
                } else {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    })
                }
            })
        }
    }
}
</script>

<style></style>